import React from 'react'
import PropTypes from 'prop-types'
import {Button, Table} from 'antd'
import classnames from 'classnames'
import styles from './List.less'

const ButtonList = ({
                      loading,
                      location,
                      buttons,
                      handleClick,
                    }) => {

  const tableProps = {
    rowKey: 'id',
    dataSource: buttons,
    loading: loading.effects['permission/buttons'],
    pagination: false,
    location,
  }

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 100,
      render: (text, record, index) => {
        return (index + 1)
      },
    },
    {
      title: '编号',
      dataIndex: 'menuSn',
      key: 'sn',
      width: 200,
    },
    {
      title: '模块',
      dataIndex: 'menuName',
      key: 'name',
      width: 200,
    },
    {
      title: '按钮权限',
      dataIndex: 'buttons',
      key: 'buttons',
      width: 800,
      render: (buttons) => {
        return buttons
          ? buttons.map(item => {
            return (
              <span>
                <Button size="small" icon={item.authorized ? 'check' : 'close'} className="margin-right"
                        type={item.authorized ? 'primary' : 'dashed'} onClick={() => {handleClick(item)}}>
                 {item.name}
                </Button>
              </span>)
          })
          : ''
      },
    },
  ]

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table)}
      columns={columns}
      simple
    />
  )
}

ButtonList.propTypes = {
  roles: PropTypes.array,
  handleRoleMenuClick: PropTypes.func,
}

export default ButtonList
